<template>
    <div>
        <!-- Slider Area Start -->
        <div class="slider-area">
            <!-- Slider Area End Here -->
            <swiper
                :modules="bannerModules"
                :space-between="50"
                autoplay
                navigation
                :pagination="{ clickable: true }"
                @swiper="onSwiper"
                @slideChange="onSlideChange"
            >
                <swiper-slide class="slide align-center-left fullscreen animation-style-01 bg-image-1" v-for="item in listBanner" :key="item.id">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-lg-5 col-md-5">
                                <div class="sldier-right-img">
                                    <img :src="item.img" alt="slider-img">
                                </div>
                            </div>
                            <div class="col-lg-7 col-md-7">
                                <div class="slider-content">
                                    <h1>{{ item.title }}</h1>
                                    <p>{{ item.description }}</p>
                                    <div class="slide-btn small-btn">
                                        <NuxtLink :to="item.url">Buy Now</NuxtLink>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
        <!-- Slider Area End -->

        <!-- 内容 -->
        <!-- Hot Deal Area Start Here -->
        <div class="hot-deal pt-50 pb-80">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-9 mb-lg-40">
                        <div class="single-hot-deal">
                            <div class="row align-items-center">
                                <div class="col-lg-7 col-md-8">
                                <div class="deal-content">
                                    <div class="deal-text">
                                        <h6>Hot Deal</h6>
                                        <h2>{{ hotDeal.title }}</h2>
                                        <p>{{ hotDeal.description }}</p>
                                    </div>
                                    <div class="countdown text-center" data-countdown="2024/12/1"></div>
                                </div>
                                </div>
                                <div class="col-lg-5 col-md-4 mt-sm-40">
                                    <div class="deal-img">
                                        <img :src="hotDeal.imgs" alt="banner-img">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3">
                        <!-- Single Product Start -->
                        <div class="">
                            <!-- Single Product Start -->
                            <div class="single-ponno-product">
                                <!-- Product Image Start -->
                                <div class="pro-img">
                                    <NuxtLink :to="`${topGoods.url}`" target="_blank">
                                        <img class="primary-img" :src="topGoods.imgs" :alt="topGoods.title">
                                    </NuxtLink>
                                    <span class="sticker-sale">New</span>
                                </div>
                                <!-- Product Image End -->
                                <!-- Product Content Start -->
                                <div class="pro-content">
                                    <div class="pro-info">
                                        <h4>
                                            <NuxtLink :to="`${topGoods.url}`" target="_blank">
                                                {{ topGoods.title }}
                                            </NuxtLink>
                                        </h4>
                                        <p><span class="special-price">${{ topGoods.description }}</span></p>
                                    </div>
                                </div>
                                <!-- Product Content End -->
                            </div>
                            <!-- Single Product End -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Hot Deal Area End Here -->

        <!-- Featured Product Start Here -->
        <div class="featured-pro pb-80">
            <div class="container">
                <div class="main-product-tab-area">
                    <!-- Nav tabs -->
                    <ul class="nav tabs-area pro-tabs-area" role="tablist">
                        <li class="nav-item">
                            <a class="active" data-toggle="tab" href="#best-deal">Best deal</a>
                        </li>
                        <li class="nav-item">
                            <a data-toggle="tab" href="#new-pro">New Product</a>
                        </li>
                        <li class="nav-item">
                            <a data-toggle="tab" href="#featured">Featured</a>
                        </li>
                    </ul>
                    <!-- Tab Contetn Start -->
                    <div class="tab-content">
                        <div id="best-deal" class="tab-pane fade show active">
                            <swiper
                                :slides-per-view="slidePerView"
                                :space-between="20"
                                :modules="[Navigation]"
                                navigation
                            >
                                <swiper-slide v-for="item in recomList" :key="item.id">
                                    <div class="single-ponno-product">
                                        <!-- Product Image Start -->
                                        <div class="pro-img">
                                            <NuxtLink :to="`/product/${item.id}`" target="_blank">
                                                <img class="primary-img" :src="item.img" :alt="item.title">
                                            </NuxtLink>
                                        </div>
                                        <!-- Product Image End -->
                                        <!-- Product Content Start -->
                                        <div class="pro-content">
                                            <div class="pro-info">
                                                <h4><NuxtLink :to="`/product/${item.id}`" target="_blank">{{ item.title }}</NuxtLink></h4>
                                                <p><span class="special-price">${{ item.price }}</span></p>
                                            </div>
                                        </div>
                                        <!-- Product Content End -->
                                    </div>
                                </swiper-slide>
                            </swiper>
                        </div>
                        <div id="new-pro" class="tab-pane fade">
                            <swiper
                                :slides-per-view="slidePerView"
                                :space-between="20"
                                :modules="[Navigation]"
                                navigation
                            >
                                <swiper-slide v-for="item in newContentList" :key="item.id">
                                    <div class="single-ponno-product">
                                        <!-- Product Image Start -->
                                        <div class="pro-img">
                                            <NuxtLink :to="`/product/${item.id}`" target="_blank">
                                                <img class="primary-img" :src="item.img" :alt="item.title">
                                            </NuxtLink>
                                        </div>
                                        <!-- Product Image End -->
                                        <!-- Product Content Start -->
                                        <div class="pro-content">
                                            <div class="pro-info">
                                                <h4><NuxtLink :to="`/product/${item.id}`" target="_blank">{{ item.title }}</NuxtLink></h4>
                                                <p><span class="special-price">${{ item.price }}</span></p>
                                            </div>
                                        </div>
                                        <!-- Product Content End -->
                                    </div>
                                </swiper-slide>
                            </swiper>
                        </div>
                        <div id="featured" class="tab-pane fade">
                            <swiper
                                :slides-per-view="slidePerView"
                                :space-between="20"
                                :modules="[Navigation]"
                                navigation
                            >
                                <swiper-slide v-for="item in frontPageList" :key="item.id">
                                    <div class="single-ponno-product">
                                        <!-- Product Image Start -->
                                        <div class="pro-img">
                                            <NuxtLink :to="`/product/${item.id}`" target="_blank">
                                                <img class="primary-img" :src="item.img" :alt="item.title">
                                            </NuxtLink>
                                        </div>
                                        <!-- Product Image End -->
                                        <!-- Product Content Start -->
                                        <div class="pro-content">
                                            <div class="pro-info">
                                                <h4><NuxtLink :to="`/product/${item.id}`" target="_blank">{{ item.title }}</NuxtLink></h4>
                                                <p><span class="special-price">${{ item.price }}</span></p>
                                            </div>
                                        </div>
                                        <!-- Product Content End -->
                                    </div>
                                </swiper-slide>
                            </swiper>
                        </div>
                    </div>
                    <!-- Tab Content End -->
                </div>
                <!-- main-product-tab-area-->
            </div>
        </div>

        <!-- Dual Banner Start Here -->
        <div class="dual-banner pb-80">
            <div class="container">
                <div class="row">
                    <div v-for="(item, index) in dualBanner.dataList" :key="item.id" :class="{ 'col-md-6': true, 'mb-sm-30': index === 0 }" >
                        <!-- Single Bannner Start Here -->
                        <div class="single-banner zoom">
                            <NuxtLink :to="item.url" target="_blank">
                                <img :src="item.imgs" alt="banner-img">
                            </NuxtLink>
                        </div>
                        <!-- Single Bannner End Here -->
                    </div>
                </div>
            </div>
        </div>
        <!-- Dual Banner End Here -->
        <!-- Laptop & Computer Products Start Here -->
        <div class="lapto-computers pb-80">
            <div class="container">
                <div class="electronics-list-area d-flex flex-wrap align-items-center justify-content-between mb-40">
                    <h5 class="e-header mb-sm-15">Laptops & Computers</h5>
                    <div class="e-tabs-list">
                        <!-- Nav tabs -->
                        <ul class="nav tabs-area categorie-tabs-area" role="tablist">
                            <li class="nav-item" v-for="(item, index) in productColumnList" :key="item.id">
                                <a :class="{ active: index === 0 }" data-toggle="tab" :href="`#a${index}`">{{ item.title }}</a>
                            </li>
                        </ul>
                        <!-- Tab Contetn Start -->
                    </div>
                </div>
                <!-- Categorie Tab Contetn Start Here -->
                <!-- Categorie Tab Contetn End Here -->
                <div class="tab-content pro-style-changer">
                    <div v-for="(item, index) in productColumnList" :id="`a${index}`" :key="item.id" :class="{ 'tab-panen': true, fade: true, show: index === 0, active: index === 0 }">
                        <div class="row">
                            <div class="single-ponno-product" v-for="(cItem, cIndex) in productContentList[index].contentList" :key="cIndex">
                                <!-- Product Image Start -->
                                <div class="pro-img">
                                    <NuxtLink :to="`/product/${cItem.id}`" target="_blank">
                                        <img class="primary-img" :src="cItem.img" :alt="cItem.title">
                                    </NuxtLink>
                                </div>
                                <!-- Product Image End -->
                                <!-- Product Content Start -->
                                <div class="pro-content">
                                    <div class="pro-info">
                                        <h4><NuxtLink :to="`/product/${cItem.id}`" target="_blank">{{ cItem.title }}</NuxtLink></h4>
                                        <p><span class="special-price">${{ cItem.price }}</span></p>
                                    </div>
                                </div>
                                <!-- Product Content End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Large Banner Start Here -->
        <div class="large-banner pb-80">
            <div class="container">
                <div class="single-banner zoom">
                    <NuxtLink :to="largeBanner.url" target="_blank">
                        <img :src="largeBanner.imgs" alt="banner-img">
                    </NuxtLink>
                </div>
            </div>
        </div>
        <!-- Large Banner End Here -->
    </div>
</template>

<script lang="ts" setup>
    import { Navigation, Pagination, Autoplay } from 'swiper/modules';
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import 'swiper/css/navigation';
    import 'swiper/css/pagination';
    import 'swiper/css';
    // import ICategory from 'models/ICategory'
    // import ISetting from 'models/ISetting'
    // declare const VANTA: { BIRDS: any }
    useHead({
		meta: [
            { name: 'keywords', content: '' },
			{ name: 'description', content: '' }
		]
    })
    const birds = ref()
    const slidePerView = ref(5);
	let birdsInstance:any = null
    onMounted(async () => {
		const platform = getPlatform()
        nextTick(() => {
            if (platform === 'PC') {
                slidePerView.value = 5
            } else {
                slidePerView.value = 2
            }
            // getIsLogin();
        })
    })
	onUnmounted(() => birdsInstance && birdsInstance.destroy())

    // 是否已经登录
    const getIsLogin = async () => {
        if (!window.location.href.includes('localhost')) {
            // 不在本地开发的则存储
            if (!getAccessStorage('accessPage')) {
                const userInfo = getStorage('userInfo');
                const params = {
                    userId: userInfo ? userInfo.id : '',
                    userName: userInfo ? userInfo.name : '游客',
                    userEmail: userInfo ? userInfo.email : '',
                    accessPage: window.location.href,
                    sourceSite: document.referrer === '' ? '链接直接打开' : document.referrer,
                    district: '',
                    accessEquipment: getPlatform() === 'Mobile' ? '手机端' : '电脑端'
                }
                const { code, data, error, msg } = await $https({
                    method: "POST",
                    url: 'clientWeb/access',
                    body: params
                })
                if (code === 200) {
                    setAccessStorage('accessPage', { url: window.location.href}, 10);
                }
            }
        }
    }
    const bannerModules = [Navigation, Pagination, Autoplay]
    // banner列表
    const result = await useServerRequest('clientWeb/homeBanner')
	const listBanner = result.list

    const onSwiper = (swiper) => {
        // console.log(swiper);
    };
    const onSlideChange = () => {
        // console.log('slide change');
    };

    // 热门交易
    const hotDeal = ref(null);
    hotDeal.value = await useServerRequest('clientWeb/homeContent/hot_deal')

    // 顶部商品
    const topGoods = ref(null);
    topGoods.value = await useServerRequest('clientWeb/homeContent/top_goods')

    // 双banner
    const dualBanner = ref(null);
    dualBanner.value = await useServerRequest('clientWeb/homeContent/dual_banner')

    // 大banner
    const largeBanner = ref(null);
    largeBanner.value = await useServerRequest('clientWeb/homeContent/large_banner')
    
    // 产品栏目列表
    const productColumnList = ref(null)
    productColumnList.value = await useServerRequest('clientWeb/column/tempType/content/product');
    const productContentList = ref([])
    productColumnList.value.forEach(async (item) => {
        const contentList = await useServerRequest(`clientWeb/column/content/${item.id}/1/9`);
        productContentList.value.push({
            id: item.id,
            title: item.title,
            contentList: contentList.list
        })
    })
    console.log(productContentList.value);

    // 推荐
    const recomList = ref(null)
    recomList.value = await useServerRequest('clientWeb/contentRecomm/recom')

    // 头条
    const frontPageList = ref(null)
    frontPageList.value = await useServerRequest('clientWeb/contentRecomm/frontPage')

    // 最新10条内容
    const newContentList = ref(null)
    newContentList.value = await useServerRequest('clientWeb/contentNew/10')
</script>

<style>
    .swiper-slide {
        height: auto;
        display: flex;
    }
</style>